<template>
  <div class="login-content">
    <van-row>
      <van-col span="24" class="login-header">登录</van-col>
    </van-row>
    <van-row class="body-content">
      <van-col span="24" class="login-img">
        <img src="../../static/img/chuanxi.png" alt />
      </van-col>
      <van-col span="24">
        <van-form @submit="onSubmit">
          <van-field
            v-model="loginId"
            name="loginId"
            label="用户名"
            placeholder="请输入账号"
            autocomplete
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            autocomplete
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            readonly
            clickable
            name="cAccName"
            label="账套"
            :value="value"
            placeholder="选择账套"
            @click="onSelectZhangTao"
          />
          <van-popup v-model="showPicker" round position="bottom" :style="{ height: '30%' }">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in columns"
                :key="index"
                :title="item.account"
                @click="onConfirm(item)"
              />
            </van-cell-group>
          </van-popup>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
            <van-row class="login-pwd" type="flex" justify="center">
              <van-col span="8">
                <van-checkbox
                  @change="onChangeCheckBox(checked)"
                  v-model="checked"
                  shape="square"
                  icon-size="24px"
                >记住密码</van-checkbox>
              </van-col>
              <!-- <van-col span="8" @click="onForgetPwd()">忘记密码</van-col> -->
            </van-row>
          </div>
          <!-- <van-col span="24" class="login-img">服务热线：400-8030-651</van-col> -->
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loginRequest, queryZhangTao } from "@/api/login/login";
export default {
  mounted() {},
  created() {},
  mounted() {
    // 挂在是判断是否需要记住密码
    this.judgeRemember();
  },
  data() {
    return {
      // 记住密码
      isRemember: false,
      // 底部tabbar
      active: 0,
      // 登录
      loginId: "",
      password: "",
      // 记住密码
      checked: false,
      // 账套
      value: "",
      showPicker: false,
      columns: [],
      /**/
    };
  },
  watch: {
  },
  methods: {
    // 选账套事件
    onSelectZhangTao() {
      this.showPicker = true;
      this.onQueryZhangTao();
    },
    // blur事件查询账套
    onQueryZhangTao() {
      let _this = this;
      queryZhangTao(this.loginId, function (data) {
        if (data.success === true) {
          _this.columns = data.accountList;
        }
      });
    },
    // 账套选择
    onConfirm(value) {
      this.value = value.account;
      // 储存用户账套信息的DsName,Account
      this.$session.set("Account", JSON.stringify(value.account));
      this.$session.set("DsName", JSON.stringify(value.dsName));
      // 业务员信息
      this.$session.set("person", JSON.stringify(value));

      this.showPicker = false;
    },
    // 判断是否记住密码
    judgeRemember() {
      // 判断用户cookie是否存在 返回 true 或false
      let flag = this.$cookies.isKey("remember");
      let remember = this.$cookies.get("remember");

      if (flag === true) {
        this.loginId = remember.loginId;
        this.password = remember.password;
        this.checked = remember.checked;
      }
    },
    // 记住密码
    remember(values) {
      // set path 保存密码
      this.$cookies.set("remember", JSON.stringify(values), "30d");
      let remember = this.$cookies.get("remember");
    },
    // 登录按钮事件
    onSubmit(values) {
      let _this = this;
      loginRequest(values, (data) => {
        let obj = values;
        //记住密码状态
        obj.checked = this.checked;
        if (data.success === true) {
          // 是否记住密码
          this.checked === true && this.remember(obj);
          // 存储返回的用户信息
          this.$session.set("user", JSON.stringify(data.userId)); //存session
          let userData = this.$session.get("user"); //获取session

          Toast(data.info);
          this.$router.push({
            name: "mainPage",
          });
        } else {
          Toast(data.info);
        }
      });
    },
    // 记住密码
    onChangeCheckBox(checked) {
      // this.isRemember = checked;
    },
    // 忘记密码
    onForgetPwd() {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.login-content {
  .login-header {
    height: 60px;
    width: 100%;
    color: white;
    line-height: 60px;
    background-color: #1989fa;
    // position: absolute;
    // top: 0px;
  }
  .body-content {
    margin-top: 80px;
    margin-bottom: 100px;
  }
  .login-img {
    margin-bottom: 80px;
    img {
      width: 178px;
      height: 50px;
    }
  }
  .login-pwd {
    margin: 10px auto;
  }
  .login-footer {
    height: 60px;
    width: 100%;
    line-height: 60px;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
  }
}
</style>
